<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="zh-cn">
  <head>
  	<base href="<%=basePath %>" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="hmyuanblog 基于Material Design Lite样式设计">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>HMYUANBLOG</title>

    <link rel="shortcut icon" href="static/favicon.ico"><!-- 浏览器图标 -->

	<link href="http://cdn.bootcss.com/material-design-lite/1.3.0/material.blue-pink.min.css" rel="stylesheet"><!-- 主题颜色 -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css"><!-- 字体 -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><!-- 图标 -->
    <link href="static/css/front/frame.css" rel="stylesheet">
    
    <script src="http://cdn.bootcss.com/material-design-lite/1.3.0/material.min.js"></script>
    <script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script><!-- 页面同步加载进度条 -->
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="static/js/front/frame.js"></script>
  </head>
  <body class="layouthide" style="background: rgb(238, 238, 238);">
		<script>
			
        </script>
        <div class="layoutmain mdl-layout--fixed-header">
            <div class="layoutcontent top100" align="center">
                <div class="showcontentlist" style="max-width: 1676px;" align="left">
                	<script type="text/javascript">
                	var arr = [,,,,,,,,,,,,,,];
                	/* 根据参数渲染列表 */
                	function showcontentlist(arrs,colnum,colwidth){
                		var showcontentlistcolhtml = "";
                		for (var j = 0; j < colnum; j++) {
                			showcontentlistcolhtml += "<div class='showcontentlistcol' style='width:calc("+colwidth+"% - 20px);'></div>";
						}
                		var showcontentlistscroll =  $(".layoutcontent").scrollTop();
                		$(".showcontentlist").html(showcontentlistcolhtml);
                		showcontentlistadd(arrs);
                		$(".layoutcontent").scrollTop(showcontentlistscroll);
                	}
                	function showcontentlistadd(arrs){
                		for (var i = 0; i < arrs.length; i++) {
							var ar = arrs[i];
	                		var lower = getloweroflist($(".showcontentlistcol"));
	                		var div = $("<div class='mdl-shadow--2dp showcontentlistcolelem' style='height:"+(i%2+1)+"00px;'>新元素</div>");
                			div.click(function(){
                				layouttarget();
	                           	setTimeout(function () { 
	                           		window.location.href="content.jsp";
	                            }, 300);
                			});
	                		$(lower).append(div);
						}
                	}
                	/* 获取高度最低的一列 */
                	function getloweroflist(elems){
                		var lower = elems[0];
                		for (var i = 1; i < elems.length; i++) {
							var elem = elems[i];
							if($(elem).height()<$(lower).height()){
								lower = elem;
							}
						}
                		return lower;
                	}
                	/* 根据窗口大小显示对应的列数 */
                	var windowwidth = null;
                	function showcontentlistrun(){
                		if((windowwidth==null||windowwidth<1024)&&$(window).width()>=1024){
            				showcontentlist(arr,3,33.333);
            				windowwidth = $(window).width();
            			}else if((windowwidth==null||windowwidth>=1024||windowwidth<480)&&($(window).width()>=480&&$(window).width()<1024)){
            				showcontentlist(arr,2,50);
            				windowwidth = $(window).width();
            			}else if((windowwidth==null||windowwidth>=480)&&$(window).width()<480){
            				showcontentlist(arr,1,100);
            				windowwidth = $(window).width();
            			}
                	}
                	$(function(){
                		//窗口大小变更事件
               			showcontentlistrun();
                		$(window).resize(function() {
                			showcontentlistrun();
                		});
                	});
				     $(".layoutcontent").scroll(function(){  
				         var $this =$(this),  
				         viewH =$(this).height(),//可见高度  
				         contentH =$(this).get(0).scrollHeight,//内容高度  
				         scrollTop =$(this).scrollTop();//滚动高度  
				        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容  
				        if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容  
				        	console.log(1);
				        	var arr3 = [,,,,,,,,];
				        	Array.prototype.push.apply(arr, arr3);
				        	showcontentlistadd(arr3);
				        	// 这里加载数据..  
				        }  
				     }); 
                	</script>
				</div>
            </div>
            <div class="layoutmenu mdl-shadow--4dp left100">
                <div style='height:160px;background: url("static/img/20170406149148123458e6329285f7b.png") 0% 0% / cover;'>
                </div>
                <nav class="mdl-navigation">
			      <a class="layouthideJump mdl-navigation__link mdl-navigation__link--current" href="index.jsp" ><i class="material-icons">&#xE88A;</i>首页1</a>
			      <a class="layouthideJump mdl-navigation__link" href="index.jsp" ><i class="material-icons">&#xE89F;</i>收藏集</a>
			      <a class="layouthideJump mdl-navigation__link" href="index.jsp" ><i class="material-icons">&#xE886;</i>社群</a>
			      <a class="layouthideJump mdl-navigation__link" href="index.jsp" ><i class="material-icons">&#xE7FD;</i>个人资料</a>
			    </nav>
            </div>
        	<header class="mdl-layout__header" style="position: absolute;">
        	    <div onclick="menutogater();" class="mdl-layout__drawer-button  mdl-js-button mdl-js-ripple-effect"><i class="material-icons"></i></div>
                <!-- Top row, always visible -->
                <div class="mdl-layout__header-row">
                  <!-- Title -->
                  <a   href="index.jsp" class="layouthideJump mdl-layout-title ">HMYUAN</a>
                  <div class="mdl-layout-spacer"></div>
                  <!-- Colored FAB button with ripple -->
                  <button onclick="console.log($('.layoutmenu').text().replace(/\s/g,''));" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp topbutton">
                      <i class="material-icons">add</i>
                  </button>
                  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                              mdl-textfield--floating-label mdl-textfield--align-right">
                    
                    <label class="mdl-button mdl-js-button mdl-button--icon"
                           for="waterfall-exp">
                      <i class="material-icons">search</i>
                    </label>
                    <div class="mdl-textfield__expandable-holder">
                      <input class="mdl-textfield__input" type="text" name="sample"
                             id="waterfall-exp" />
                    </div>
                  </div>
                </div>
          </header>
        </div>
  </body>
</html>
